<template>
  <div class="c-modal" v-if="props.modelValue" ref="cModalRef">
    <div class="btns">
      <el-button class="" :type="props.cancelType" @click="handleCancel">{{props.cancelText}}</el-button>
      <el-button class="" :type="props.confirmType" @click="handleConfirm">{{props.confirmText}}</el-button>
    </div>
    <div class="slotContent">
      <slot></slot> 
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref,watch,nextTick} from 'vue';

/** props */
const props = defineProps({
  modelValue:{
    type:Boolean,
    default:false
  },
  cancelText:{
    type:String,
    default:'取消'
  },
  confirmText:{
    type:String,
    default:'确定'
  },
  confirmType:{
    type:String,
    default:'primary'
  },
  cancelType:{
    type:String,
    default:'default'
  },
  
});

/** emit */
const emit = defineEmits([
  'handleConfirm',
  'handleCancel',
  "update:modelValue",
  "onOpen"
])

/** state */
const cModalRef = ref();

/** life cycle, watch 生命周期 、监听*/

watch([props],()=>{
  if(props.modelValue){
    onOpen()
  }
})

/** methods */

const onOpen = ()=>{
  emit("onOpen");
  nextTick(()=>{
    setparentPosR()
  })
}

const setparentPosR = ()=>{
  cModalRef.value.parentNode.style.position = 'relative'
  // console.log(cModalRef.value.parentNode)
}

const hide = ()=>{
  emit("update:modelValue",false);
}

const handleConfirm = ()=>{
  emit("handleConfirm")
  hide()
}
const handleCancel = ()=>{
  emit("handleCancel")
  hide()
}

/** expose */
defineExpose({
  
})

</script>
<style lang="less" scoped>
.c-modal{
  top: 0;
  left: 0;
  position: absolute;
  width: calc(100% - 20px);
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  z-index: 1000;
  .btns{
    display: flex;
    justify-content: end;
    margin: 10px 0;
  }

}
</style>